<template>
  <div class="load">
    <div class="top">
      <div class="left">
        <div class="item">
          <div class="label">
            <span></span>
            <span>进场时间</span>
          </div>
          <el-date-picker
            v-model="form.inTimeRange"
            type="datetimerange"
            size="mini"
            style="width: 320px"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="进场开始时间"
            end-placeholder="进场结束时间"
            align="right"
          >
          </el-date-picker>
        </div>
        <div class="item">
          <div class="label">
            <span></span>
            <span>出场时间</span>
          </div>
          <el-date-picker
            v-model="form.outTimeRange"
            type="datetimerange"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 320px"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="出场开始时间"
            end-placeholder="出场结束时间"
            align="right"
          >
          </el-date-picker>
        </div>
        <div class="item">
          <div class="label">
            <span></span>
            <span>车牌号</span>
          </div>
          <el-input
            v-model="form.vehicleNo"
            placeholder="请输入"
            size="small"
            style="width: 120px"
            clearable
          >
          </el-input>
        </div>
        <div class="item">
          <div class="label">
            <span></span>
            <span>委托号</span>
          </div>
          <el-input
            v-model="form.delegateNo"
            placeholder="请输入"
            size="small"
            clearable
            style="width: 120px"
          >
          </el-input>
        </div>
        <div class="item">
          <el-button
            type="primary"
            class="search"
            @click="getFleetList(2)"
            icon="el-icon-search"
            >查询</el-button
          >

          <el-button
            type="primary"
            class="search"
            @click="exportExcel"
            icon="el-icon-download"
            >导出</el-button
          >
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#EEF1F5' }"
        style="width: 100%"
        @row-click="rowClick"
      >
        <el-table-column prop="vehicleNo" label="车牌号" width="100">
        </el-table-column>
        <el-table-column prop="planNo" label="计划号" width="150">
        </el-table-column>
        <el-table-column prop="planTagName" label="作业类型" width="100">
        </el-table-column>
        <el-table-column prop="goodsTypeAlias" label="货种" width="150">
        </el-table-column>
        <el-table-column prop="goodsName" label="货名" width="150">
        </el-table-column>
        <el-table-column prop="morphologyAlias" label="货物形态" width="100">
        </el-table-column>
        <el-table-column prop="entryWeight" label="进场称重" width="80">
        </el-table-column>
        <el-table-column prop="outWeight" label="出场称重" width="80">
        </el-table-column>
        <el-table-column prop="netTon" label="净重" width="80">
        </el-table-column>
        <el-table-column prop="weightUnit" label="重量单位" width="80">
        </el-table-column>
        <el-table-column prop="inDate" label="进场时间" width="180">
        </el-table-column>
        <el-table-column prop="outDate" label="出场时间" width="180">
        </el-table-column>
        <el-table-column prop="warehouseInDate" label="入库时间" width="180">
        </el-table-column>
        <el-table-column prop="warehouseOutDate" label="出库时间" width="180">
        </el-table-column>
        <el-table-column prop="operateNo" label="作业号" width="120">
        </el-table-column>
        <el-table-column prop="warehouseInSpace" label="入库货位" width="80">
        </el-table-column>
        <el-table-column prop="warehouseOutSpace" label="出库货位" width="80">
        </el-table-column>
        <el-table-column prop="inOperator" label="进场放行人" width="100">
        </el-table-column>
        <el-table-column prop="outOperator" label="出场放行人" width="100">
        </el-table-column>
        <el-table-column prop="inChannelName" label="进场通道名称" width="120">
        </el-table-column>
        <el-table-column prop="outChannelName" label="出场通道名称" width="120">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryAll.startpage"
          :page-sizes="[10, 15, 30, 50]"
          :page-size="queryAll.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryAll.totalNum"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loadList',
  data() {
    return {
      tableData: [],
      termList: [],
      condition: {
        scdId: '',
        voyType: '',
        billno: '',
        cntrno: '',
      },
      dialogVisible: false,
      visible: 'box',
      btnLoading: false,
      btnLoading2: false,
      boxInfo: {},
      isChecked: false,
      currentIndex: -1,
      multipleSelection: {},
      queryAll: {
        startpage: 1,
        pagesize: 10,
        totalNum: 0,
      },
      form: {
        vehicleNo: '', //车牌号
        delegateNo: '', //委托号
        // driver: "", //司机
        inTimeRange: [],
        outTimeRange: [],
      },
      title: '',
      driverFlag: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },

  methods: {
    exportExcel() {
      let params = {
        vehicleNo: this.form.vehicleNo,
        delegateNo: this.form.delegateNo,
        inStartDate:
          this.form.inTimeRange && this.form.inTimeRange.length
            ? this.form.inTimeRange[0]
            : '',
        inEndDate:
          this.form.inTimeRange && this.form.inTimeRange.length
            ? this.form.inTimeRange[1]
            : '',
        outStartDate:
          this.form.outTimeRange && this.form.outTimeRange.length
            ? this.form.outTimeRange[0]
            : '',
        outEndDate:
          this.form.outTimeRange && this.form.outTimeRange.length
            ? this.form.outTimeRange[1]
            : '',
      }
      this.$api
        .vehicleDetailExport(params)
        .then((res) => {
          const content = res
          const blob = new Blob([content]) // 构造一个blob对象来处理数据
          const link = document.createElement('a') // 创建a标签
          link.download = '车辆进出明细表.xls' // a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        })
        .catch((e) => {
          console.log(e)
        })
    },

    getFleetList(flag) {
      if (flag == 2) {
        this.queryAll.startpage = 1
      }
      let params = {
        current: this.queryAll.startpage,
        size: this.queryAll.pagesize,
        vehicleNo: this.form.vehicleNo,
        delegateNo: this.form.delegateNo,
        inStartDate:
          this.form.inTimeRange && this.form.inTimeRange.length
            ? this.form.inTimeRange[0]
            : '',
        inEndDate:
          this.form.inTimeRange && this.form.inTimeRange.length
            ? this.form.inTimeRange[1]
            : '',
        outStartDate:
          this.form.outTimeRange && this.form.outTimeRange.length
            ? this.form.outTimeRange[0]
            : '',
        outEndDate:
          this.form.outTimeRange && this.form.outTimeRange.length
            ? this.form.outTimeRange[1]
            : '',
      }
      this.$api.getVehicleList(params).then((res) => {
        if (res.data.data) {
          this.tableData = res.data.data.records
          this.queryAll.totalNum = res.data.data.total
        } else {
          this.tableData = []
          this.queryAll.startpage = 1
          this.queryAll.totalNum = 0
        }
        // if (flag) {
        // 	this.tableData.map(item =>{
        // 		if (item.id ==this.multipleSelection.id) {
        // 			this.$set(this,"multipleSelection",item)
        // 			console.log(this.multipleSelection);

        // 		}
        // 	})
        // }
      })
    },
    rowClick(v) {
      this.multipleSelection = v
    },
    handleSizeChange(val) {
      this.queryAll.startpage = 1
      this.queryAll.pagesize = val
      this.getFleetList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getFleetList()
    },
    successAdd() {
      this.$message.success('新增司机成功')
      this.getFleetList()
    },
    successDel() {
      this.$message.success('删除司机成功')
      this.getFleetList(1)
    },
  },

  computed: {},

  mounted() {
    this.condition.voyType = this.$route.name == 'unloadList' ? 'I' : 'E'
    this.condition.scdId = this.$route.query.id
    this.getFleetList()
  },
}
</script>
<style lang="scss" scoped>
.load {
  background: #fff;
  padding: 20px;
}
.top {
  display: flex;
  align-items: flex-start;

  border-bottom: 1px solid #d7d7d7;
  box-sizing: border-box;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 16px;
  display: flex;
  .item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 17px;
    .label {
      margin-right: 5px;
      width: 60px;
      span:first-child {
        color: #ff3838;
      }
    }
  }
  .search {
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
  .del {
    height: 30px;
    padding: 5px 10px;
  }
  .left {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }
}
:deep.el-dialog__footer {
  text-align: center;
  .el-button {
    color: #fff;
    background: #0f47b8;
    height: 30px;
    width: 100px;
    padding: 5px 10px;
  }
}
:deep.el-dialog__header {
  padding: 0;
}
:deep.el-dialog__body {
  padding: 20px;
}
.pagination {
  // height: 50px;
  margin: 10px;
  text-align: right;
}
</style>
